<template>
  <scroll class="content">
    <div class="pictureShow">
      <input id="myInput" type="file" accept="image/*" multiple>
      <div class="imgItem" v-for="(pic,index) in picData" :key="index">
        <div class="select">
          <img v-show="!pic.selected" @click="handlerSelect(pic,index)" src="@/assets/img/select/picSelect.svg" alt="">
          <img v-show="pic.selected" @click="handlerSelect(pic,index)" src="@/assets/img/select/picSelected.svg" alt="">
        </div>
        <img :src="pic.src" alt="">
      </div>
    </div>
  </scroll> 
</template>

<script>
import Scroll from "@/components/common/scroll/Scroll";
import { mapActions, mapMutations } from 'vuex';

export default {
    name: 'PictureShow',
    data() {
      return {
        select: false,
        picData: [],

      }
    },
    components: {
      Scroll
    },
    mounted() {
      document.getElementById("myInput").addEventListener("change", this.getFile, true)    
    },
    methods: {
      ...mapMutations(['HANDLER_SELECTED_DATA']),
      handlerSelect(pic,index) {
        this.picData[index].selected = !pic.selected
      },
      // 获取本地照片
      async getFile(file) {
        if (!file) {
          return;
        }
        const {
          files
        } = file.target;
        if (files.length <= 0) return;
        for (let i = 0; i < files.length; i++) {
          const fileReader = new FileReader();
          const picItem = {}
          fileReader.readAsDataURL(files[i]);
          fileReader.onload = (event) => {
            try {
              const {
                result
              } = event.target;
              picItem.src = result
              picItem.selected = true
              this.picData.push(picItem)
              this.HANDLER_SELECTED_DATA(picItem)
            } catch (e) {
            }
        };
        }
      }
    }
}
</script>

<style scoped>
.content {
  overflow: hidden;

  position: absolute;
  top: 75px;
  bottom: 0;
  left: 0;
  right: 0;
}
.pictureShow {
  padding-top: 3px;
  padding-left: 3px;
}
.imgItem {
  position: relative;
  height: 90px;
  width: 33%;
  overflow: hidden;
  float: left;
  border: 1px solid #252323e7;
}
.imgItem img {
  height: 100%;
  width: 100%;
}
/* 勾选按钮样式 */
.select {
  position: absolute;
  top: 0;
  right: 0;
  height: 35px;
  width: 35px;
  overflow: hidden;
}
/* 选择的照片样式 */
/* #myImage {
  position: relative;
  height: 90px;
  width: 33%;
  overflow: hidden;
  float: left;
  border: 1px solid #252323e7;
} */
</style>